<template>
    <div class="page-wrap">
      <!--transition :name="transitionName"-->
        <router-view></router-view>
      <!--/transition-->
    </div>
</template>
<script>
export default {
  data() {
    return {
      transitionName: 'slide-left',
    }
  },
  watch: {
    $route(to, from) {
      // 有主级到次级
      if (to.meta.index > from.meta.index) {
        this.transitionName = 'slide-left'
      } else if (to.meta.index < from.meta.index) {
        // 由次级到主级
        this.transitionName = 'slide-right'
      }
    },
  },
}
</script>>
<style lang="less">
  html, body{
    width: 100%;
    height: 100%;
  }

  .page-wrap{
    width: 100%;
    height: 100%;
  }

  .page{
    width: 100%;
    height: 100%;
  }

  .page-body{
    height: 100%;
    .px2rem(padding-top, 100);
    box-sizing: border-box;
    overflow: scroll;
  }
</style>
